<template>
    <div id="white-list">
        <div class="search-bar">
            <el-input v-model="searchParams.codeAndName" placeholder="请输入编号/名称" size="mini" style="width: 206px"></el-input>
            <el-button @click="handleSearchClick" type="primary">查询</el-button>
        </div>

        <!--  -->
        <RiskTable
            ref="risk-table"
            :tableData="tableData"
            :tableConfig="tableConfig"
            :column="columns"
            :paging="paging"
            v-loading="tableLoading"
            :key="key"
            style="height: calc(100% - 120px)"
            @page-change="getWhitetList"
        >
            <template #entryCode="{ row }">
                <a v-show="row.entryCode && !row.edit" href="javascript:;" @click="handleCellClick(row)">{{ row.entryCode + '/' + row.entryName }}</a>
                <a v-show="!row.entryCode && !row.edit" href="javascript:;" @click="handleCellClick(row)">请选择条目</a>
                <el-select
                    v-show="row.edit"
                    v-model="row.entryCode"
                    @change="
                        val => {
                            handleEntryChange(val, row);
                        }
                    "
                    popper-class="long-select"
                    filterable
                    clearable
                    size="mini"
                >
                    <el-option v-for="i in entryStorage" :key="i.entryCode" :label="i.entryCode + ' ' + i.entryName" :value="i.entryCode">
                    </el-option>
                </el-select>
            </template>
        </RiskTable>
    </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import RiskTable from '@/common/components/risk-table-plus.vue';
import { ColumnVO, DictVO, PageVO, TableConfigVO } from '@/common/vo';
import API from './api/credit-limit';
import { dateFormat } from '@/utils/tools';

@Component({ name: 'WhiteList', components: { RiskTable } })
export default class WhiteList extends Vue {
    searchParams: any = {
        codeAndName: '',
    };

    tableLoading: boolean = false;
    tableData: any[] = [];
    tableConfig: TableConfigVO = {
        rowKey: 'creditKindId', // 主键key
        allRowKeys: [], // 所有页数据的key集合
    };
    columns: ColumnVO[] = [
        {
            field: 'creditKindId',
            title: '编号',
            minWidth: 80,
            // width: 80,
            // render: (value, record) => this.creditKindIdStorage.find((i) => i.dictKey === value)?.dictKeyName,
        },
        {
            field: 'creditKindName',
            title: '授信品种名称',
            minWidth: 210,
            // width: 150,
            // render: (value, record) => this.creditKindIdStorage.find((i) => i.dictKey === value)?.dictKeyName,
        },
        {
            field: 'entryCode',
            title: '对应条目编码/名称',
            minWidth: 700,
        },
        {
            field: 'modifyUser',
            title: '修改用户',
            minWidth: 150,
            // width: 150,
        },
        {
            field: 'modifyDate',
            title: '修改日期',
            align: 'center',
            minWidth: 150,
            // width: 150,
            render: (value, record) => dateFormat(value),
        },
    ];
    paging: PageVO = { pageSize: 25, currentPage: 1, total: 0 };

    creditKindIdStorage: DictVO[] = []; // 授信品种下拉
    entryStorage: any[] = [];
    edit: boolean = false;
    key: number = 0;

    async mounted() {
        await API.getCreditKindId().then((res: DictVO[]) => {
            res.forEach(i => {
                i.value = i.dictKey;
                i.label = i.dictKeyName;
            });
            this.creditKindIdStorage = res || [];
        });

        this.getWhitetList();
        this.getEntryList();
    }

    getWhitetList(): void {
        this.tableLoading = true;
        API.getWhiteList({ ...this.searchParams, paging: this.paging })
            .then((res: any) => {
                this.tableData = res.list || [];
                this.paging.total = res.total || 0;
            })
            // .catch((res: any) => {
            //     this.tableData = [
            //         { creditKindId: '1', entryCode: 'YH114', entryName: 'niaho' },
            //         { creditKindId: '2', entryCode: 'YH114', entryName: 'niaho' },
            //     ];
            //     this.paging.total = 1;
            // })
            .finally(() => {
                this.tableLoading = false;
            });
    }

    handleSearchClick(): void {
        this.paging.currentPage = 1;
        this.getWhitetList();
    }

    /**
     * 单元格点击事件
     * @param row 选中行
     */
    handleCellClick(row): void {
        console.log(row, 'row');

        row.edit = true;
        this.key++;
    }

    // 获取条目列表
    private getEntryList(): void {
        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: '',
                entryType: '',
                paging: { currentPage: 1, pageSize: 19960831 },
                filterEntryCode: [],
                useO32Cal: false,
            })
            .then((res: any) => {
                this.entryStorage = res.list;
                // res.list.forEach((element) => {
                //     this.entryStorageEnum[element.entryCode] = element.entryName;
                // });
            });
    }

    /**
     * 条目变更时间
     * @param val 选中值
     */
    handleEntryChange(val, row): void {
        console.log(val, 'val');
        console.log(this.tableData, 'tableData');
        console.log(row, 'row');

        API.updateWhiteList(row).then((res: any) => {
            this.getWhitetList();
        });
    }
}
</script>
<style lang="scss" scoped>
#white-list {
    padding: 0 5px;
    height: 100%;
    .search-bar {
        padding: 15px 0;
        /deep/ .el-button {
            padding: 7px 10px;
            margin-left: 5px;
        }

        /deep/ .el-button + .el-button {
            margin-left: 5px;
        }

        /deep/ .el-button [class*='el-icon-'] + span {
            margin-left: 0;
        }
    }
}

/deep/ .vxe-table .el-input__inner {
    height: 28px;
    line-height: 28px;
    padding-top: 5px;
}
</style>

<style lang="scss">
.long-select {
    color: red;
    .el-scrollbar .el-select-dropdown__list {
        max-width: 58vw !important;
    }
}
</style>
